'use client';

import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar";
import { Conversation } from "@/context/conversationContext";
import { formatDistanceToNowStrict } from 'date-fns';
import { zhCN } from 'date-fns/locale';

interface ConversationItemProps {
  conversation: Conversation;
  selected: boolean;
  onClick: () => void;
}

const ConversationItem = ({ conversation, selected, onClick }: ConversationItemProps) => {

  const lastMessageContent = conversation.lastMessage?.content || '暂无消息';
  const lastMessageTime = conversation.lastMessage?.createdAt 
    ? formatDistanceToNowStrict(new Date(conversation.lastMessage.createdAt), {
        addSuffix: true,
        locale: zhCN,
      })
    : '';

  return (
    <div
      className={`flex items-center px-4 py-3 cursor-pointer transition-colors duration-200 ${
        selected 
          ? 'bg-blue-50 dark:bg-stone-700' 
          : 'hover:bg-gray-100 dark:hover:bg-stone-800'
      }`}
      onClick={onClick}
    >
      <Avatar className="h-10 w-10">
        <AvatarImage src={conversation.avatar || undefined} alt={conversation.name} />
        <AvatarFallback>{conversation.name?.[0]?.toUpperCase()}</AvatarFallback>
      </Avatar>
      <div className="ml-3 flex-1 min-w-0">
        <div className="font-medium truncate">{conversation.name}</div>
        <div className="text-sm text-gray-500 dark:text-gray-400 truncate">{lastMessageContent}</div>
      </div>
      <div className="ml-2 flex flex-col items-end text-xs text-gray-400 dark:text-gray-500">
        <span className="whitespace-nowrap">{lastMessageTime}</span>
        {conversation.unreadCount && conversation.unreadCount > 0 && (
          <span className="mt-1 inline-block min-w-[18px] px-1 bg-red-500 text-white text-[10px] rounded-full text-center leading-tight">{conversation.unreadCount}</span>
        )}
      </div>
    </div>
  );
}

export {
  ConversationItem
}